<template>
  <div class="modify-warehouse">
    <vxe-table
      ref="tableRef"
      border
      @radio-change="radioChangeEvent"
      :radio-config="{ highlight: true }"
      show-overflow="title"
      height="400"
      :row-config="{ isHover: true }"
      :data="tableData"
      :scroll-y="{ enabled: true, gt: 30 }"
    >
      <vxe-column type="radio" width="60">
        <template #header>
          <a-button type="link" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</a-button>
        </template>
      </vxe-column>
      <vxe-column field="cnName" title="仓库名称"></vxe-column>
      <vxe-column field="warehouseManagerName" title="联系人"></vxe-column>
      <vxe-column field="managerPhone" title="联系方式"></vxe-column>
      <vxe-column field="address" title="仓库地址"></vxe-column>
    </vxe-table>
    <div class="submit-btn-wrapper">
      <a-button v-debounce type="primary" @click="submitHandle">确认</a-button>
      <a-button @click="cancelHandle">取消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ClientAdvanceManagement.CilentInfo;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit", state: any): void;
}>();
const { visible, passData } = toRefs(props);
const { selectRow, tableData, tableRef, loading } = InitHook();
const { cancelHandle, clearRadioRowEevnt, radioChangeEvent, submitHandle, init } = OperationHook({ selectRow, loading, tableRef, tableData, passData, emit });
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      selectRow.value = null;
    }
  }
);
</script>
<style lang="stylus" scoped>
.submit-btn-wrapper{
    padding: 12px;
    text-align: center;
    :deep(.ant-btn){
        margin-right: 16px;
    }
}
</style>
